<template>
	<view>
		<!-- 所有内容的容器 -->
		<!--头像-->
		<view class="u-m-t-20">
		<!-- 	<div v-if="userInfo.sex == 0">
			  <u-avatar :src="userInfo.imagepath" mode="circle" :show-sex="true"
			  	sex-icon="woman"></u-avatar>
			</div>
			<div v-else>
			  <u-avatar :src="userInfo.imagepath" mode="circle" :show-sex="true"
			  	sex-icon="man"></u-avatar>
			</div> -->
			
			<u-avatar :src="userInfo.imagepath" size="large"></u-avatar>
			
			<u-cell-item style="float: right;width: 80%;" value="更改头像" class="u-flex" @click="ashow = true"></u-cell-item>
			
			<!-- 底部弹出ActionSheet操作菜单 -->
			<u-action-sheet :list="alist" v-model="ashow" @click="changePicture"></u-action-sheet>
		</view>
		<!-- 姓名与性别 -->
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item title="姓名" :value="userInfo.username" @click="editName()"></u-cell-item>
				<u-cell-item v-if="userInfo.sex == '0'" title="性别" value="未知" @click="show = true"></u-cell-item>
				<u-cell-item v-if="userInfo.sex == '1'" title="性别" value="男" @click="show = true"></u-cell-item>
				<u-cell-item v-else="userfin.sex == '2'" title="性别" value="女" @click="show = true"></u-cell-item>
			</u-cell-group>
		</view>
		<!-- 性别选择器 -->
		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm" ></u-select>
		<!-- 消息提示 -->
		<u-toast ref="uToast" />
		<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				title: '个人中心',
				//当前用户信息
				userInfo:this.$store.state.user.userInfo,
				tabbar: '',
				show:false,
				list: [
					{
						value: '0',
						label: '未知'
					},
					{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				alist: [{
					text: '拍照',
					color: 'blue',
					fontSize: 28
				}, {
					text: '从相册选择'
				}, {
					text: '查看原图'
				}],
				ashow: false
				
			}
		},
		methods: {
			//更改头像
			changePicture(index){
				console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`)
				//TODO 拍照
				
				//TODO 从相册选择
				
				//TODO 查看原图
				
			},
			// 性别选择点击确定
			confirm(e) {
				//console.log(e[0].label);
				//alert("修改成功");
				this.$store.state.user.userInfo.sex = e[0].value;
				//TODO 操作数据库
				//性别修改成功消息提示
				this.$refs.uToast.show({
					title: '修改成功！',
					type: 'success',	
				})	
			},
			//修改姓名
			editName(){
				this.$u.route('pages/person-third-page/editName/editName');
			}
		}
	}
</script>

<style>

	
</style>
